<template>
  <BasicLayout title="评价">
    <template slot="content">
      <el-card class="card" v-for="item in curComment" :key="item.label">
        <div class="card-title" slot="header">{{ item.label }}</div>
        <CommentRate
          v-for="option in item.options"
          :key="option"
          :label="option"
        />
      </el-card>
      <el-card class="card">
        <div class="card-title" slot="header">详细评价</div>
        <el-input
          class="comment-content"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 6 }"
          placeholder="请输入评价内容"
          v-model="textarea"
        >
        </el-input>
      </el-card>
    </template>
    <div class="commit-wrapper" slot="footer">
      <el-button class="commit-btn" type="primary" round @click="commit">
        提交评价
      </el-button>
    </div>
  </BasicLayout>
</template>

<script>
import CommentRate from "@/components/CommentRate/index.vue";
import BasicLayout from "@/components/BasicLayout/index.vue";
import { personComment } from "@/constants/comment/personComment";
import { staffComment } from "@/constants/comment/staffComment";
export default {
  components: {
    BasicLayout,
    CommentRate,
  },
  computed: {
    curComment() {
      if (this.$route.query.type === "person") {
        return personComment;
      } else if (this.$route.query.type === "staff") {
        return staffComment;
      }
      return [];
    },
  },
  data() {
    return {
      textarea: "",
      personComment,
      staffComment,
    };
  },
  methods: {
    commit() {
      this.$message({
        message: "评价成功",
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
.card {
  margin: 1em 0;
}
.commit-wrapper {
  width: 90%;
  margin: 0 auto;
}
.commit-btn {
  width: 100%;
}
</style>
